<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">织物管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">织物属性</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="main">
      <el-card class="box-card1">
        <div slot="header" class="clearfix">
          <span>属性类别</span>
          <el-button style="float: right; padding: 3px 0;font-size: 20px;" type="text" class="el-icon-plus" @click="handleAdd(0)"></el-button>
        </div>
        <div :class="{ active: activeIndex == index }" v-for="(item, index) in clothesProperties" :key="item.id" class="card-item" @click="setCurrentType(item, index)">
          <div style="width: fit-content;">{{ item.name }}</div>
          <div>
            <el-button @click="handleEdit(item, 0)" type="text" class="el-icon-edit" circle style="padding: 0;"></el-button>
            <el-button @click="handleDelete(item)" type="text" class="el-icon-delete nx-del" circle style="padding: 0;"></el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card2" v-if="showSubcard">
        <div slot="header" class="clearfix">
          <span>{{ activeName }}选项</span>
          <el-button style="float: right; padding: 3px 0;font-size: 20px;" type="text" class="el-icon-plus" @click="handleAdd(1)"></el-button>
        </div>
        <div :class="{ active: activeIndex2 == index }" v-for="(itema, index) in sublist" :key="itema.id" class="card-item" @click="setCurrentOption(itema, index)">
          <div style="width: fit-content;">{{ itema.name }}</div>
          <div>
            <el-button @click="handleEdit(itema, 1)" type="text" class="el-icon-edit" circle style="padding: 0;"></el-button>
            <el-button @click="handleDelete(itema)" type="text" class="el-icon-delete nx-del" circle style="padding: 0;"></el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card2" v-if="showSubsubcard">
        <div slot="header" class="clearfix">
          <span>{{ activeName2 }}选项</span>
          <el-button style="float: right; padding: 3px 0;font-size: 20px;" type="text" class="el-icon-plus" @click="handleAdd(2)"></el-button>
        </div>
        <div :class="{ active: activeIndex3 == index }" v-for="(itemb, index) in subsublist" :key="itemb.id" class="card-item" @click="setCurrentOption2(itemb, index)">
          <div style="width: fit-content;">{{ itemb.name }}</div>
          <div>
            <el-button @click="handleEdit(itemb, 2)" type="text" class="el-icon-edit" circle style="padding: 0;"></el-button>
            <el-button @click="handleDelete(itemb)" type="text" class="el-icon-delete nx-del" circle style="padding: 0;"></el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card3" v-if="showSubsubsubcard">
        <div slot="header" class="clearfix">
          <span>{{ activeName3 }}选项</span>
          <el-button style="float: right; padding: 3px 0;font-size: 20px;" type="text" class="el-icon-plus" @click="handleAdd(3)"></el-button>
        </div>
        <div v-for="itemc in subsubsublist" :key="itemc.id" class="card-item">
          <div style="width: fit-content;">{{ itemc.name }}</div>
          <div>
            <span @click="handleEdit(itemc, 3)" class="nx-btn nx-edit">编辑</span>
            <span @click="handleDelete(itemc)" class="nx-btn nx-del">停用</span>
          </div>
        </div>
      </el-card>
    </div>
    <AddEditDialog :addEditId="addEditId" :addEditStatus="addEditStatus" :addEditIsDialog="addEditIsDialog" :addEditName="addEditName" :pid="pid" :addEditType="addEditType"></AddEditDialog>
  </div>
</template>
<script>
import AddEditDialog from "./components/addEditDialog.vue";
import { getClothClassify, delClothClassify } from "@/api/clothes";
export default {
  components: {
    AddEditDialog,
  },
  // 表格数据
  data() {
    return {
      // 查询字段
      rules: {},
      crumbsStatus: "", // 三级面包屑名称
      addEditIsDialog: false, // 添加编辑页面状态
      addEditStatus: "add",
      addEditName: "", // 添加编辑名称
      addEditType: false, // 添加编辑类型
      addEditId: "", // 添加编辑rowidd
      activeIndex: null, // 当前选中的属性类别
      activeIndex2: null, // 当前选中的选项类别
      activeIndex3: null, // 当前选中的选项类别
      clothesProperties: [], //属性类别
      activeName: "", // 当前选中的属性名
      activeName2: "", // 当前选中的选项名
      activeName3: "", // 当前选中的选项名
      pid: "", //
      activeId: "", // 当前选中的属性id
      activeId2: "", // 当前选中的属性id
      activeId3: "", // 当前选中的属性id
      showSubcard: false, // 是否显示子卡片
      showSubsubcard: false, // 是否显示子子卡片
      showSubsubsubcard: false, // 是否显示子子子卡片
      sublist: [], // 子卡片列表
      subsublist: [], // 子子卡片列表
      subsubsublist: [], // 子子子卡片列表
    };
  },
  // 初始化加载
  mounted() {
    // 查询
    this.getList();
  },
  watch: {
    clothesProperties(val) {
      if (val.length > 0 && this.activeIndex != null) {
        this.sublist = val[this.activeIndex].child;
      }
    },
    sublist(val) {
      if (val.length > 0 && this.activeIndex2 != null) {
        this.subsublist = val[this.activeIndex2].child;
      }
    },
    subsublist(val) {
      if (val.length > 0 && this.activeIndex3 != null) {
        this.subsubsublist = val[this.activeIndex3].child;
      }
    },
  },
  // 自定义方法
  methods: {
    // 查询列表
    getList() {
      getClothClassify(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.clothesProperties = res.data;
        }
      });
    },
    // 停用
    handleDelete(row) {
      this.$confirm("此操作将停用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delClothClassify({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停用",
          });
        });
    },
    // 设置当前选中的属性类别
    setCurrentType(item, index) {
      this.activeIndex = index;
      this.activeName = item.name;
      this.activeId = item.id + "";
      this.showSubcard = true;
      this.sublist = item.child;
    },
    // 设置当前选中的属性类别
    setCurrentOption(item, index) {
      this.activeIndex2 = index;
      this.activeName2 = item.name;
      this.activeId2 = item.id + "";
      this.showSubsubcard = true;
      this.subsublist = item.child;
    },
    // 设置当前选中的属性类别
    setCurrentOption2(item, index) {
      this.activeIndex3 = index;
      this.activeName3 = item.name;
      this.activeId3 = item.id + "";
      this.showSubsubsubcard = true;
      this.subsubsublist = item.child;
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 添加
    handleAdd(type) {
      this.addEditId = "";
      this.addEditStatus = "add";
      this.addEditIsDialog = true;
      if (type == 0) {
        this.pid = 0 + "";
        this.addEditName = "属性类别";
      } else if (type == 1) {
        this.pid = this.activeId;
        this.addEditName = this.activeName + "选项";
        this.addEditType = true;
      } else if (type == 2) {
        this.pid = this.activeId2;
        this.addEditName = this.activeName2 + "选项";
      } else if (type == 3) {
        this.pid = this.activeId3;
        this.addEditName = this.activeName3 + "选项";
      }
    },
    // 编辑
    handleEdit(row, type) {
      this.addEditId = row.id + "";
      this.addEditStatus = "edit";
      this.addEditIsDialog = true;
      if (type == 0) {
        this.addEditName = "属性类别";
      } else if (type == 1) {
        this.addEditName = this.activeName + "选项";
        this.addEditType = true;
      } else if (type == 2) {
        this.addEditName = this.activeName2 + "选项";
      } else if (type == 3) {
        this.addEditName = this.activeName3 + "选项";
      }
    },
    // 编辑添加取消关闭
    closeAddEdit() {
      this.addEditIsDialog = false;
      this.addEditIsDialog2 = false;
      this.addEditType = false;
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  padding-left: 30px;
  font-size: 25px;
}
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.dialog-footer {
  padding-left: 80px;
  padding-top: 100px;
}
.main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.card-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  border-bottom: solid 1px #f2f2f2;
  display: flex;
  justify-content: space-between;
}
// .card-item:hover{
//   background-color: #e8e8e8;
// }
.active {
  background-color: #d5e5e4;
}
</style>
